<script setup lang="ts">
import { ResOptions } from '~~/types/types'
useHead({
  script: [{ type: 'text/javascript', src: 'https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-h5-min.js' }],
  link: [{ rel: 'stylesheet', href: 'https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css' }]
})
definePageMeta({
  middleware: 'course'
})
const { public: { apiBase } } = useRuntimeConfig()
const route = useRoute()
const videoId = route.params.id
const userStore = useUserStore()
const { data } = await useFetch(apiBase + 'video/getPlayAuth/' + videoId, {
  headers: {
    Authorization: userStore.getToken,
    LoginType: 'User'
  }
})
const playAuth = (data.value as ResOptions<any>).result.playAuth
const player = () => {
  //@ts-ignore
  new Aliplayer(
    {
      id: 'J_prismPlayer',
      width: '70%',
      height: '600px',
      vid: videoId, // 必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
      playauth: playAuth,
      encryptType: '1', // 必选参数。音视频播放凭证。
      // 可选配置项
      // cover:  // 封面
      mediaType: 'video', // 音频或时视频
      qualitySort: 'asc', // 清晰度排序
      autoplay: false, // 自动播放
      isLive: false, // 直播
      rePlay: true, // 循环播放
      preload: true,
      controlBarVisibility: 'hover', //控制条的显示方式：鼠标悬停
      useH5Prism: true, // 播放器类型 h5
    },
    function (player: any) {
      console.log('The player is created.')
    }
  )
}
onMounted(() => { player() })
</script>

<template>
  <div>
    <div id="J_prismPlayer" style="margin: 0 auto"></div>
  </div>
</template>